<template>
	<view>
		<!-- <toubu :current="1" /> -->
		<div style="height: 60rpx;"></div>
		<div class="shaxuan">
			<view @click="dianji(index)" :class="nametop==index?'redname':''" v-for="(item,index) in list" :key="index">
				{{item.text}}</view>
		</div>
		<!-- 时间 -->
		<div v-if="nametop==0">
			<view class="time">
				<!-- <span>{{time}}</span> -->
				<view class="uni-list">
					<view class="uni-list-cell">
						<!-- <view class="uni-list-cell-left">
							当前选择
						</view> -->
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input">{{date}}</view>
							</picker>
						</view>
					</view>
				</view>
				<div>你有{{timels.length ? timels.length : 0 }}条新消息</div>
			</view>
			<div class="lebiao" v-for="(item,index) in timels" :key="index">
				<div>
					<view>
						<image :src="item.avatar" mode=""></image> 
					</view>
					<view>
						<span v-if="item.type==0">
							{{item.nickname}}
							<span class="redpa">查看</span>
							你的
							<span class='redpa'>名片</span>
							第<span class="redpa">{{item.num}}</span>
							次
						</span>
						<span v-else-if="item.type==1">
							{{item.nickname}}
							<span class="redpa">查看</span>
							你的
							<span class='redpa'>产品</span>
							第<span class="redpa">{{item.num}}</span>
							次
						</span>
						<span v-else-if="item.type==2">
							{{item.nickname}}
							<span class="redpa">查看</span>
							你的
							<span class='redpa'>官网</span>
							第<span class="redpa">{{item.num}}</span>
							次
						</span>
						<span v-else-if="item.type==3">
							{{item.nickname}}
							<span class="redpa">复制</span>
							你的
							<span class='redpa'>微信</span>
							第<span class="redpa">{{item.num}}</span>
							次
						</span>
						<span v-else-if="item.type==4">
							{{item.nickname}}
							<span class="redpa">转发</span>
							你的
							<span class='redpa'>名片</span>
							第<span class="redpa">{{item.num}}</span>
							次
						</span>
						
						<p>成交在望</p>
					</view>
				</div>
				<span>{{item.time}}</span>
			</div>
		</div>
		<!-- 行为 -->
		<div v-if="nametop==1">
			<view class="timesuan">
				<span>被查看的行为统计(次)</span>
				<!-- <image :src="imgHost + '/mine/suan.png'" mode=""></image> -->
			</view>
			<div class="hezi">
				<view @click="toRouter(1)">
					<image :src="imgHost + '/mine/hezi.png'" mode=""></image>
					<div>
						<span>查看产品</span>
						<p>{{behavior.product}}</p>
					</div>
				</view>
				<view @click="toRouter(2)">
					<image :src="imgHost + '/mine/diannao.png'" mode=""></image>
					<div>
						<span>查看官网</span>
						<p>{{behavior.official}}</p>
					</div>
				</view>
				<view @click="toRouter(3)">
					<image :src="imgHost + '/mine/wx.png'" mode=""></image>
					<div>
						<span>复制微信</span>
						<p>{{behavior.copy_wechat}}</p>
					</div>
				</view>
				<view @click="toRouter(4)">
					<image :src="imgHost + '/mine/sfz.png'" mode=""></image>
					<div>
						<span>转发名片</span>
						<p>{{behavior.forward_card}}</p>
					</div>
				</view>
			</div>
			<div class="chakan">
				<view>
					<div>
						<image :src="imgHost + '/mine/chakan.png'" mode=""></image>
						查看名片
					</div>
					<span>{{behavior.view_card}}</span>
				</view>
				<view>
					<div>
						<image :src="imgHost + '/mine/aix.png'" mode=""></image>
						觉得靠谱
					</div>
					<span>{{behavior.user_zan}}</span>
				</view>
				<view>
					<div>
						<image :src="imgHost + '/mine/pyq.png'" mode=""></image>
						看朋友圈
					</div>
					<span>{{behavior.fabulous_card}}</span>
				</view>
			</div>
		</div>
		<!-- 人 -->
		<div :class="nametop==2?'disblock':'dsinone'">
			<view class="rensuo">
				<div class="r-chan" @click="ren=true">
				<picker @change="bindPickerChange" range-key="name" :value="setIndex" :range="renlist">
					<view class="uni-input input">{{sousuo}}</view>
				</picker>
					<!-- <u-icon name="arrow-down-fill" color="#000" size="28"></u-icon> -->
					<image :src="imgHost + '/down.png'" mode=""></image>
				</div>
				<!-- <div>
					<image :src="imgHost + '/mine/suan.png'" mode=""></image>
					<span>进一天</span>
					<image class="img1" :src="imgHost + '/down1.png'" mode=""></image>
					<u-icon name="arrow-down" color="#a0a0a0"></u-icon> -->
				<!-- </div> -->
			</view>
			<div id='main'>
				<line1 ref='lines' v-if="nametop==2" :xAxisData="xAxisData" :seriesData="seriesData"></line1>
			</div>
		</div>

		<!-- <taber :current="1" /> -->
		<!-- 人的时间筛选 -->
		<!-- <u-select v-model="ren" :list="renlist" @confirm="confirm"></u-select> -->

	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	// import * as echarts from 'echarts';
	// import taber from '../../component/taber/taber.vue'
	import toubu from '../../component/toubu/toubu.vue'
	// import line1 from '../../component/line/line.vue';
	import line1 from '../../component/line/index.vue';
	import {
		card_survey,
		card_person,
		cardbe
	} from '@/api/userminp.js'
	export default {
		components: {
			// taber,
			toubu,
			line1
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				// 当前时间
				date: currentDate,
				imgHost: HTTP_REQUEST_URL + '/mingpian',
				setIndex: 0,
				sousuo: '产品',
				ren: false,
				renlist: [
					{
						value: 1,
						name: '产品'
					},
					{
						value: 2,
						name: '文章'
					},
				],
				behavior: {},
				timels: {},
				time: new Date().toISOString().slice(0, 10),
				nametop: 0,
				list: [{
						text: "时间"
					},
					{
						text: "行为"
					},
					{
						text: "人"
					},
				],
				xAxisData: [],
				seriesData:[],
				personData:{}
			};
		},
		onLoad() {
			this.getcard_survey()
			this.getcard()
			this.getcardbe()
		},
		watch:{
			// 选择时间发生变化
			date:function(){
				this.getcard_survey()
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 选择时间
			bindDateChange: function(e) {
				this.date = e.detail.value
				console.log(this.date,"date之后")
			},
			// 处理时间过滤
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindPickerChange(e) {
				this.setIndex = e.detail.value
				this.sousuo = this.renlist[e.detail.value].name
				let list = []
				let count = []
				if(this.setIndex == 0){
					this.personData.product.map((item, index) => {
						list.push(item.date)
						count.push(item.count)
					})
				}else{
					this.personData.article.map((item, index) => {
						list.push(item.date)
						count.push(item.count)
					})
				}
				this.$refs['lines'].reload(list,count);
			},
			confirm(e) {
				this.sousuo = e[0].label
			},
			// 行为请求数据
			getcardbe() {
				cardbe().then((res) => {
					this.behavior = res.data
				})
			},
			// 折线图
			getmani(item, count) {
				this.xAxisData = item
				this.seriesData = count
			
				// var myChart = echarts.init(document.getElementById('main'));
				// var option = {
				// 	xAxis: {
				// 		type: 'category',
				// 		data: item,
				// 		axisLabel: {
				// 			rotate: -45,
				// 		},

				// 	},
				// 	yAxis: {
				// 		type: 'value'
				// 	},
				// 	series: [{
				// 		data: count,
				// 		type: 'line'
				// 	}]
				// }


				// // 使用刚指定的配置项和数据显示图表。
				// myChart.setOption(option);
			},
			// 我的雷达人
			getcard() {
				card_person().then((res) => {
					this.personData = res.data.list
					let list = []
					let count = []
					res.data.list.product.map((item, index) => {
						list.push(item.date)
						count.push(item.count)
					})
					this.getmani(list, count)
				})
			},
			// 获取时间列表
			getcard_survey() {
				card_survey({time:this.date}).then((res) => {
					console.log(res.data,"123")
					this.timels = res.data.list
				})

			},
			dianji(index) {
				this.nametop = index
			},
			// 跳转
			toRouter(type){
				uni.navigateTo({
					url:"/pages/userminp/seeProductUserList/seeProductUserList?type="+type
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	#main {
		width: 90vw;
		height: 504rpx;

		div {
			/deep/#zr_0 {
				top: -50rpx !important;
			}
		}

	}

	.disblock {
		box-shadow: 0 0 36rpx rgba(0, 0, 0, 0.07);
		padding: 0rpx 10rpx;
		margin: 0rpx 20rpx;
		display: block;
		background-color: #fff;
		border-radius: 25rpx;

		.rensuo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 40rpx;
			padding-top: 25rpx;
			.r-chan{
				display: flex;
				align-items: center;
				image{
					width: 20rpx;
					height: 12rpx;
					margin-left: 6rpx;
				}
			}
			div:nth-child(2) {
				background-color: #f7f8fa;
				border-radius: 25rpx;
				padding: 10rpx 20rpx;
				text-align: center;

				span {
					font-family: "PingFang SC";
					font-weight: 400;
					font-size: 24rpx;
					line-height: 44rpx;
					text-align: right;
					color: #a0a0a0;
					margin-right: 10rpx;
				}

				image {
					margin-right: 10rpx;
					width: 24rpx;
					height: 24rpx;
				}
				
				.img1{
					width: 16rpx;
					height: 12rpx;
				}
			}
		}
	}

	.dsinone {
		display: none;
	}

	.shaxuan {
		padding: 0rpx 48rpx;
		padding-bottom: 32rpx;
		display: flex;
		justify-content: space-between;

		.redname {
			background: #e33c21;
			color: #fff;

		}

		view {
			border-radius: 30rpx;
			background: #fff;
			border: 2rpx solid #ccc;
			height: 60rpx;
			padding: 0rpx 80rpx;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 60rpx;
			text-align: center;
			color: #595959;

		}
	}

	.timesuan {
		padding: 0rpx 48rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		span {
			font-family: "PingFang SC";
			font-weight: 400;
			font-size: 24rpx;
			line-height: 44rpx;
			text-align: left;
			color: #999;
		}

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.time {
		padding-left: 48rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		span {
			font-weight: 400;
			font-size: 36rpx;
			line-height: 44rpx;
			text-align: left;
			color: #161616;
		}

		div {
			width: 222rpx;
			height: 44rpx;
			border-radius: 22rpx 0 0 22rpx;
			background: #fff;
			box-shadow: 0 0 18rpx rgba(0, 0, 0, 0.08);
			font-weight: 400;
			font-size: 20rpx;
			line-height: 44rpx;
			text-align: center;
			color: #e33c21
		}
	}

	.lebiao {
		margin: 16rpx 48rpx;
		padding: 32rpx 24rpx;
		background-color: #fff;
		border-radius: 8rpx;
		display: flex;
		justify-content: space-between;

		div {
			display: flex;

			view:nth-child(1) {
				width: 80rpx;
				height: 80rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			view:nth-child(2) {
				margin-left: 28rpx;

				.redpa {
					color: rgba(227, 60, 33, 1);
					font-size: 24rpx;
					font-face: PingFang SC;
					font-weight: 400;
					letter-spacing: 0;
				}

				span {
					color: rgba(0, 0, 0, 1);
					font-size: 24rpx;
					font-face: PingFang SC;
					font-weight: 400;
					letter-spacing: 0;
				}

				p {
					font-family: "PingFang SC";
					font-weight: 400;
					font-size: 24rpx;
					line-height: 44rpx;
					text-align: left;
					color: #000;
				}
			}
		}

		span {
			font-weight: 400;
			font-size: 22rpx;
			line-height: 44rpx;
			text-align: right;
			color: #a0a0a0;
		}
	}

	.hezi {
		margin: 32rpx 48rpx;
		background: #fff;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		// grid-template-columns: 50% 50%;
		grid-template-rows: 160rpx 160rpx;

		& > view {
			display: flex;
			align-items: center;
			padding-left: 20rpx;

			image {
				width: 58rpx;
				height: 48rpx;
				margin-right: 24rpx;
			}

			div {
				display: flex;
				align-items: center;
				span {
					font-family: "PingFang SC";
					font-weight: 400;
					font-size: 24rpx;
					line-height: 44rpx;
					text-align: left;
					color: #777;
				}

				p {
					font-family: "PingFang SC Medium";
					font-weight: 500;
					font-size: 40rpx;
					line-height: 44rpx;
					text-align: left;
					color: #e33c21;
				}
			}
		}
	}

	.chakan {
		padding: 0rpx 48rpx;

		view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #eee;
			padding: 30rpx 0rpx;

			div {
				font-weight: 400;
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
				color: #666;

				image {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
					margin-right: 20rpx;
				}
			}

			span {
				font-family: "PingFang SC SNaNrpxibold";
				font-weight: 600;
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
				color: #161616;
			}
		}
	}
</style>
